Design Skill Builder: User Guide

The Design Skill Builder writes a Claude Skill file, called SKILL.md, that describes your brand's colors, type, layout, and writing rules. Once you add that file to Claude, Claude can build landing pages, slide decks, and presentations that follow your brand without you repeating the rules each time.

Created by Don Giannatti · dongiannatti.com · Substack

1. What the builder produces

The builder has two outputs. The first is a live preview: a mock web page or slide that updates as you change settings. It uses placeholder images and sample text, so you can judge the look before you commit to it.

The second is the skill file. When you click Generate Skill File, the builder sends your settings to Anthropic and receives a SKILL.md file of roughly 120 lines or fewer. The file contains instructions, not a design. It tells the AI exactly which colors, fonts, sizes, and layout rules to use.

The file works in two parts. The top section has a name and a description. The description tells Claude when to use the skill. The body holds the rules. A skill with a clear description is picked up automatically when someone asks for a landing page or deck that matches it.

2. Before you start

You need an Anthropic API key

The builder calls the Anthropic API to write the skill file, so it needs your API key. Paste it into the first section of the form. The key begins with sk-ant-.

The builder runs in your browser. Your key is sent only to Anthropic. Check the Remember this key option only on a computer you control, because the key is then stored in that browser's local storage.

You need a PNG logo if you have one

The logo must be a PNG. The builder recommends about 500 by 150 pixels. If you skip the logo, the Web Name you enter appears in its place in the header.

You need an internet connection

The builder loads its fonts and any Google Fonts you type in from the internet. Without a connection, the preview falls back to system fonts.

3. Section by section

The form on the left runs top to bottom. Each section controls one part of the skill. You can change anything at any time, and the preview updates immediately.

API Key

Enter your key here. Once you leave the field, this section collapses into a masked summary, such as Key entered: sk-ant-...x7Q2. Click Show to open it again. The collapsed view protects the key from being read over your shoulder.

Brand Basics

Skill Name. The name Claude uses to identify the skill. Use something you will recognize later, such as "Acme Landing Pages".
One line: when should this skill be used? This becomes the skill's description. Claude reads it to decide when the skill applies, so name the work it covers, such as "Use when building landing pages or slide decks for Acme."
Web Name. Appears as the brand mark when no logo is uploaded.
Logo. Upload a PNG. The preview shows a small thumbnail so you can confirm it.

Colors

Five colors control the brand. Each one has a specific job in the skill file:

Color	Used for
Main	Calls to action, buttons, and hero backgrounds
Secondary	Card and section fills
Accent	Links, highlights, the quote rule, and secondary buttons
Page Background	The background of the page or slide
Page Text	Headings and body copy on the page

Below the pickers, a contrast readout checks four text pairs against the WCAG AA standard of 4.5 to 1. A line marked "passes AA" is readable for most people. A line marked "below AA" is harder to read, and you should darken the text or lighten the background. The text on buttons and hero blocks is chosen automatically to contrast with its background.

Typography

Headline Font and Body Copy Font. Pick a style from the dropdown, or type any Google Fonts family name, such as Fraunces or Source Serif 4. The suggestion list shows popular choices. The status line under the box confirms whether the font loaded. If it reads "Not found on Google Fonts," check the spelling against the name on fonts.google.com.
Type Scale. Tight, Moderate, or Dramatic. This sets the ratio between heading sizes. Tight suits dense product pages and dashboards. Dramatic suits bold landing pages and opening slides.
Base Size. A slider from 12 to 20 pixels. It scales every heading and body size together, so you can raise the whole system without changing its proportions.
Heading Case. Sentence case, Title Case, or All Caps. The preview applies the choice to headings only.
Heading Tracking. The space between letters in headings. Wide tracking suits all-caps headings. Tight tracking suits large display type.

Note. A custom font name also sets the fallback font. The dropdown style you choose becomes the backup if the Google font cannot load in someone else's browser.

Layout

Format. Web Page shows a full page. Slide 16:9 and Slide 4:3 show a single slide with a brand footer. The format is written into the skill, so the AI knows whether to build a page or a slide.
Show slide numbers. Adds a number to the footer of each slide. Applies only to slide formats.
Spacing. Compact, Standard, or Generous. Controls padding around sections and the gaps between cards.
Image Ratio. 4:3, 3:2, 16:9, or 1:1. Sets the shape of image areas.
Text Alignment. Left or Center. Applies to hero copy and the brand mark.
Body Line Height. Tight, Normal, or Relaxed. Relaxed spacing helps long paragraphs. Tight spacing suits short labels and captions.

Hero Design

The hero is the opening block of a page. Single Image places the copy above a full-width image. Split (copy / image) places the copy beside the image in two columns. Stacked places the image across the top with the copy block beneath it.

Images

Treatment. Bordered adds a thin frame around each image. Full Bleed runs images edge to edge.
Corners. Sharp or Rounded.
Soft box shadow. Adds a shadow beneath each image. Shadows read well on light pages and are often unnecessary on dark ones.

Cards

Card Style. Filled uses the secondary color as the card background. Bordered draws an outline. Flat removes the background and the outline. Shadowed adds a lift beneath each card.
Cards Per Row. Two, three, or four. Slides use up to three, even when four is chosen, so the text stays legible.

Buttons

Shape sets pill-shaped or rectangular corners. Fill sets solid or outline. Both choices apply to the preview buttons and to the instructions written into the skill.

Mood and Structure

Tone. Open and Airy sets a light page background with dark text. Dark and Moody sets a dark background with light text. Choosing a tone also resets the Page Background and Page Text colors to matching defaults. Change those two colors afterward if you want something different.
Structure. Strict Grid aligns every column. Asymmetrical offsets the cards on purpose. Loose and Balanced is not gridded, but it still feels even.

Voice and Writing Rules

This section is the difference between a skill that only sets visual rules and one that also sets how the copy sounds.

Tone of Voice. Describe how the brand speaks, such as "plain, direct, and warm, written for working professionals." Be specific. The more concrete the description, the closer the output matches it.
Words and Phrases to Avoid. List words, separated by commas, that the AI must never use. Include the words your audience dislikes or that your brand has retired.
No em dashes and No emojis. Two common rules, one click each.

Save and Load

Export Brand saves every setting, including the logo, to a file ending in -brand.json. Import Brand loads that file and restores the form. Use it to keep several brands, to return to a brand months later, or to pass your settings to a colleague. The API key is never saved in the export.

4. Reading the live preview

The preview shows what the skill asks the AI to produce, using sample content. It is a reference, not the final output. The AI will write real headlines and copy, choose its own image subjects, and follow the rules you set.

Two tabs sit above the preview. Live Preview is the visual. Skill File shows the text the builder generates. Switch between them as you adjust settings.

The preview uses a diagonal gray pattern in place of images. Real images appear only when someone builds a page with them.

5. Generating the skill file

Confirm your API key is entered.
Review the preview and adjust anything that looks wrong.
Click Generate Skill File. The Skill File tab opens and the text streams in.
When the status line says "Done" with a line count, read the output. A count above 120 lines means the file is long. It still works, but you can ask for a shorter version.
Click Download SKILL.md to save the file, or Copy to paste it elsewhere.

Note. Each generation sends a request to Anthropic, so each click uses a small amount of your API usage. Generate again only after you change a setting.

6. Using the skill in Claude

A downloaded SKILL.md becomes useful once Claude can load it. Add the file to Claude as a skill, using the skills settings in your Claude account. Check the current steps in Claude's help documentation, since the menu names can change.

After the skill is available, ask Claude for work the description covers. For example:

Build a landing page for our spring workshop series.

Claude will read the skill and follow its colors, type, layout, and writing rules. For a slide deck, name the format directly, such as "Make a 16:9 deck for the client review." Claude uses the slide rules when the request names a deck or presentation.

If the output drifts from the brand, the usual cause is a rule that is too vague. Return to the builder, make the rule more specific, and generate the file again.

7. Saving and reloading a brand

Click Export Brand after your settings are final. Save the -brand.json file with your other project files.
To return to the brand later, open the builder, click Import Brand, and choose that file.
Confirm the status line reads "Brand loaded," then review the preview before generating a new file.

Exports include the logo as embedded data, so the file can be larger than the other settings suggest. Keep the export with the brand so you never need the original logo file to rebuild the skill.

8. Troubleshooting

What you see	What to do
"Enter your Anthropic API key first."	The key field is empty. Paste the key, then generate again.
"API error (401)"	The key is wrong or was revoked. Check it in your Anthropic console and paste it again.
"API error (429)"	Too many requests were sent in a short time. Wait a minute, then generate again.
"Logo must be a PNG file."	Convert the logo to PNG. JPG, SVG, and WebP files are not accepted.
"Not found on Google Fonts."	Check the spelling and capitalization. Use the family name exactly as Google lists it.
"That file is not a saved brand."	Import only files made by Export Brand. Other JSON files will not load.
"Below AA" in the contrast readout	Darken the page text, lighten the background, or choose a different color pair.
Status says the file is over 120 lines	The file still works. Ask for a shorter version, or remove optional rules such as the avoid list.
Preview shows a different font than you chose	The font has not finished loading, or the name was not found. Wait for the status line to confirm.
The API key section will not reopen	Click Show next to the section title. If the key was removed, paste a new one.

9. Tips for better results

Start from the brand you already have. Copy the exact hex values from your existing style guide or website. Approximate colors produce approximate pages.
Make one skill per brand or per client. A skill that mixes two identities produces pages that belong to neither.
Write the description as a trigger. Name the work it covers, such as "landing pages, slide decks, and one-page proposals." Vague descriptions are rarely selected.
Test before you trust. Ask Claude for one page and one slide, then compare them with your brand. Adjust the rules, regenerate, and test again.
Use the voice rules. Writing that sounds like your brand is as important as the colors. The avoid list is the fastest way to remove phrases you dislike.
Keep an exported copy. Save the Export Brand file each time you change a brand. It is the only complete record of the settings.